<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=EDGE;">
	<link href="../build/common/base.css" rel="stylesheet">
	<link rel="stylesheet" href="../build/form/form.css">
	<link rel="stylesheet" href="../build/form/page.css">
	<link rel="stylesheet" href="../assets/js/common/element/index.css">
	<script type="text/javascript" src="../build/common/base.js"></script>
	<script type="text/javascript" src="../build/common/vueEdit.js"></script>
	<script src="../assets/js/common/element/index.js"></script>

</head>
<style>
	* {
		padding: 0px;
		margin: 0px;
	}

	ul li {
		list-style: none;
	}

	.joker_div {
		width: 100%;
		position: relative;
		padding: 0.6875rem;
		display: flex;
		margin-bottom: 60px;
	}

	/* .joker_divtwo{
        content: "";
        height: 10px;
        width: 10px;
        border-width: 2px 2px 0px 0px;
        border-color: #000;
        border-style: solid;
        transform: rotate(45deg);
        position: absolute;
        top: 27%;
        right: 3.7;
    } */
	.joker_divtwo {
		width: 10%;
		margin: 10px 3px;
		position: relative;
		margin-left: 1.875rem;
	}

	.joker_divtwo1 {
		width: 100%;
		background-color: #666;
		color: #fff;
		padding: 0.6875rem 0px;
		text-align: center;
		font-size: 0.9375rem;
		border-radius: 5px;
	}

	.joker_divtwo2 {
		background-color: #bbbbbb;
		padding: 0.375rem 0.5625rem;
		color: #333;
		border-radius: 5px;
	}

	.joker_divtwo2 li {
		border-bottom: #fff;
		background-color: #666;
		padding: 0.25rem 0.25rem 0px 0.25rem;
		color: #fff;
		font-size: 0.8125rem;
		border-bottom: 1px solid #bbbbbb;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.joker_divtwo2 li:last-child {
		border: none;
	}

	.joker_divh4 {
		font-size: 0.8125rem;
		padding: 0.25rem 0px;
	}

	.joker_rightimg {
		width: 1.875rem;
		height: 1.875rem;
		margin: 6px 0px;
		position: absolute;
		left: 100%;
		top: 0;
	}

	.joker_lup {
		width: 1.875rem;
		height: 1.875rem;
		margin: 0px auto;
		display: block;
	}

	.joker_active {
		background-color: #18a689 !important;
	}

	.joker_a {
		color: #fff;
		text-decoration: none;
	}

	.joker_divtwo:first-child {
		margin-left: 0;
	}

	.no_data {
		width: 100%;
		padding: 8px;
		background-color: #f9f9f9;
		text-align: center;
	}
</style>

<body>
	<div class="joker_div" id="app">
		<div v-for="(item,index) in dataList" :key="index" class="joker_divtwo">
			<div>
				<div :class="['joker_divtwo1',{joker_active:item.status==1} ]">
					{{item.typename}}
				</div>
				<img src="img/joker_lup.png" class="joker_lup" />
				<ul class="joker_divtwo2">
					<h4 class="joker_divh4">工作任务</h4>
					<li v-for="(it,index) in item.xmprocedures" :class="{'joker_active':it.status == 1}">
						<a href="https://www.baidu.com" class="joker_a">{{index+1}},{{it.procedurename}}</a>
					</li>
				</ul>
			</div>
			<!-- 隐藏最后一个箭头 -->
			<img v-if="index != dataList.length-1" src="img/joker_right.png" class="joker_rightimg" />
		</div>
		<div v-if="dataList.length==0" class="no_data">暂无数据</div>
	</div>
</body>



</html>
<script type="text/javascript">

	//调用该方法赋值给vue实例下的dataList
	function aabb(id) {
		// var loading = layer.load();

		// vm.id = id
		// $.ajax({
		// 	type: "get",
		// 	url: __ctx + "/sys/xmprocedure/gettypetwolist?projectid=" + id,
		// 	dataType: "json",
		// 	success: function (data) {

		// 		vm.dataList = data.data
		// 		console.log("请求成功", data)

		// 	}
		// })
		// var denfer = baseService.get(__ctx + "/sys/xmprocedure/gettypetwolist?projectid=" + id);
		// denfer.then(
		// 	function (result) {
		// 		if (result.code == 200) {
		// 			vm.dataList = result.data
		// 			var ifrObj = document.querySelector("iframe").contentWindow.document
		// 			var targetIfr = ifrObj.getElementById("myproject")
		// 			targetIfr.contentWindow.aabb(result.data)
		// 			// window.location.href = "../../index.html"

		// 		}
		// 	}
		// )
	}
	var vm = new Vue({
		el: "#app",
		data: {
			dataList: [],
			id: ""
		},
		mounted() {

			this.id = localStorage.getItem("xiangmuId")
			console.log("拿到了吗??", this.id)
		},
		methods: {
			test: function () {
				console.log("you ma", this.dataList)
			}

		},
		watch: {
			"id": function (newName) {
				var loading = layer.load();
				console.log(newName, "全局项目选择")
				var that = this
				var url = __ctx + "/sys/xmprojectdisplay/getinfo/" + newName
				var post = Vue.baseService.post(url);
				post.then(function (res) {
					console.log("res", res)
					that.dataList = res.data
					layer.close(loading)
					// that.veList = res
				}, function (status) {
					layer.close(loading)
					if (status == !0) {
						layer.close(loading)
						$.Toast.error('加载失败！' + status);
					}
				})
			}
			// id: {
			// 	handler(newName, oldName) {
			// 		var loading = layer.load();
			// 		console.log(newName, "全局项目选择")
			// 		var that = this
			// 		var url = __ctx + "/sys/xmprojectdisplay/getinfo/" + newName
			// 		var post = Vue.baseService.post(url);
			// 		post.then(function (res) {
			// 			console.log("res", res)
			// 			that.dataList = res.data
			// 			layer.close(loading)
			// 			// that.veList = res
			// 		}, function (status) {
			// 			layer.close(loading)
			// 			if (status == !0) {
			// 				layer.close(loading)
			// 				$.Toast.error('加载失败！' + status);
			// 			}
			// 		})


			// 	},
			// 	immediate: true,
			// 	deep: true
			// }

		}
	})

</script>

</html>